<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<div id="root">
			<app></app>
		</div>
		<script type="text/javascript">
			
			///学生组件
			const student = Vue.extend({
				template:`
				<div>
					<h1>姓名：{{name}}</h1>
					<h1>age:{{age}}</h1>
				</div>
				`,
				data() {
					return {
						name:"宋飞",
						age:15
					}
				}
			})
			
			//学校组件
			const school = Vue.extend({
				 //这个student在哪个组件注册的，就在哪个组件里写；
				template:`
					<div>
						<h1>{{schoolName}}</h1>
						<student></student>
					</div>
				`,
				data() {
					return {
						schoolName:"星球"
					}
				},
				components:{
					student
				}
				
			})
			
			//定义hello组件
			const hello =Vue.extend({
				template:`
					<h1>你好{{hi}}</h1>
				`,
				data () {
					return {
						hi:"尚硅谷"
					}
				}
			})
			
			//app组件
			const app = Vue.extend({
				template:`
				<div>
					<school></school>
					<hello></hello>
				</div>
				`,
				components:{
					school,
					hello
				}
			})
			
			const vm = new Vue({
				el:"#root",
				components : {
					app
				}
			})
		</script>
	</body>
</html>